<template>
  <div :style="outModuleCss" :class="propsData.params.fixedTop? 'no-margin' : ''">
    <div v-if="propsData.params.fixedTop == 0" :style="moduleBgCss" class="module-bg"></div>
    <a-affix
      v-if="propsData.params.fixedTop == 1"
      :class="affixLock ? 'affix' : ''"
      :offset-top="60"
      :target="() => this.globalRef"
      @change="changeAffix"
    >
      <div class="header-search">
        <div :style="moduleBgCss" class="module-bg full-width"></div>
        <!-- 搜素模板1 -->
        <searchIcon
          v-if="propsData.params.styleType == 1"
          :propsData="propsData"
        ></searchIcon>
        <!-- 搜素模板2 -->
        <searchText v-else :propsData="propsData"></searchText>
      </div>
    </a-affix>
    <div v-else>
      <div class="header-search">
        <!-- 搜素模板1 -->
        <searchIcon
          v-if="propsData.params.styleType == 1"
          :propsData="propsData"
        ></searchIcon>
        <!-- 搜素模板2 -->
        <searchText v-else :propsData="propsData"></searchText>
      </div>
    </div>
  </div>
</template>

<script>
import searchIcon from "./templates/searchIcon.vue";
import searchText from "./templates/searchText.vue";
import { mixinsModuleCss } from "@/components/DiyNew/diy/mixins/index.js";

export default {
  name: "diySearch",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
  },
  mixins: [mixinsModuleCss],
  components: {
    searchIcon,
    searchText,
  },
  data() {
    return {
      affixLock: false,
    };
  },
  mounted() {},
  watch: {},
  computed: {
    globalRef() {
      return this.$diyObser.store.globalRef;
    },
  },
  methods: {
    changeAffix(e) {
      this.affixLock = e;
    },
  },
};
</script>

<style lang="scss" scoped>
.header-search {
  position: relative;
}
.fixed-top {
  width: 100%;
  position: fixed;
  left: 0;
  top: 64px;
  z-index: 511;
  background-color: #ffffff;
}
.hold-place {
  width: 100%;
  height: 42px;
  background-color: #ffffff;
}
.affix ::v-deep .ant-affix {
  top: 43px !important;
}
.module-bg {
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
}
.full-width{
  width: 100%!important;
  height: 100%!important;
  left: 0!important;
}
.no-margin{
  margin: 0!important;
}
</style>
